<template>
  <div class="facility"  :style="'height:' + height + 'px;'">
    <img class="facility-backimg" src="../../assets/back.png"/>
    <div class="facility-back">
      <div class="facility-search-b"></div>
      <div class="facility-search">
        <img class="facility-search-img" src="../../assets/search-b-icom.png" />
        <input class="facility-inp" placeholder="搜索设备" />
      </div>
      <div class="facility-time">{{new Date | format}}</div>
      <div class="facility-tips">我的设配</div>

      <div class="footDiv"></div>
    </div>
    <div class="facility-list">
      <div class="facility-con" v-for="(item, index) in data" :key = 'index' :class="{'facility-con-t': (index+1)%3 !==0}" @click="getList(item.id, item.typeName)">
        <img class="facility-con-icon" :src="item.picture"/>
        <div>{{item.typeName}}</div>
      </div>
    </div>
    <FootTab></FootTab>
  </div>
</template>

<script>
import FootTab from '../../components/footTab.vue'
import { equipmentTypeList } from '../../api/index.js'
import { getYYYYMMDD } from '../../api/unit.js'
export default {
  data () {
    return {
      tabIdx: 0,
      height: document.documentElement.clientHeight,
      data: []
    }
  },
  filters: {
    format: function (value) {
      return getYYYYMMDD(value).nTimes
    }
  },
  methods: {
    getList (id, name) {
      this.$router.push({path: '/facility/list', query: {id: id, name: name}})
    },
    async getData () {
      let msg = await equipmentTypeList()
      this.data = msg.data
      console.log('====>', msg.data)
    }
  },
  mounted () {
    this.getData()
  },
  components: {
    FootTab
  }
}
</script>

<style scoped>
.facility{
  /*position: relative;*/
  background: #EDEAED;
}
.facility-backimg{
  position: fixed;
  z-index: 10;
  width: 750px;
  height: 527px;
}
.facility-back{
  position: fixed;
  top:0;
  z-index: 20;
  /*z-index: -1;*/
  width: 750px;
  height: 527px;
  /*background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));*/
}
.facility-search-b{
  position: absolute;
  left: 30px;
  top: 52px;
  width: 690px;
  height: 64px;
  border-radius:10px;
  background:rgba(236,235,235,1);
  opacity:0.5;
  border-radius:10px;
  z-index: 90;
}
.facility-search{
  display: flex;
  z-index: 99;
  justify-content: center;
  align-items: center;
  width: 690px;
  height: 64px;
  margin-left: 30px;
  border-radius:10px;
  margin-top: 52px;
  overflow: hidden;
  font-size: 28px;
}
.facility-inp{
  width: 550px;
  background: none;
  color: #fff;
}
.facility-inp::-webkit-input-placeholder{
  color: #fff;
}
.facility-search-img{
  width: 31px;
  height: 31px;
  margin-right: 24px;
}
.facility-time{
  font-size:26px;
  color: #fff;
  margin-top: 41px;
  margin-bottom: 23px;
  margin-left: 47px;
}
.facility-tips{
  padding-top: 23px;
  margin-left: 47px;
  font-weight: bold;
  color: #FFFEFE;
  font-size: 45px;
  letter-spacing: 10px;
}
.facility-list{
  position: fixed;
  z-index: 999;
  height: calc(100% - 380 );
  width: 690px;
  margin-left: 30px;
  font-size: 24px;
  padding-top: 305px;
  /*margin-top: 53px;*/
  display: flex;
  flex-wrap: wrap;
}
.facility-con{
  width: 208px;
  height: 206px;
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 15px 0px rgba(194,194,194,0.77);
  border-radius:10px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.facility-con-t{
  margin-right: 33px;
}
.facility-con-icon{
  width: 69px;
  height: 69px;
  margin-top: 50px;
  margin-bottom: 36px;
}
.footDiv{
  height: 98px;
}
</style>
